/**
 * 自定义loader的配置
 */

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackSizePlugin = require("./src/custom-plugin/plugin");

module.exports = {
	mode: "production",
	context: path.resolve(__dirname, "src"),
	entry: "./index.js",
	output: {
		publicPath: "./",
		path: path.resolve(__dirname, "dist"),
		filename: "bundle.js",
	},
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "src"),
			common$: path.resolve(__dirname, "src/common/add.js"),
		},
		extensions: [".vue", ".js", ".json"],
		mainFiles: ["add"],
		modules: [path.resolve(__dirname, "lib"), "node_modules"],
	},
	devtool: "source-map",
	externals: {
		jquery: "$", // 键名代表应用代码中导入的模块名称，值代表全局变量
	},
	devServer: {
		host: "localhost",
		port: "8080",
		hot: true,
		// contentBase: path.resolve(__dirname, "dist"),
	},
	module: {
		rules: [
			{
				test: /\.css$/, // 匹配所有符合规则的文件
				loader: ["style-loader", "css-loader"], // 加载的loader，从后往前执行解析
				include: path.resolve(__dirname, "src"), // 对该目录下的文件应用规则
				exclude: /node_modules/, // 排除符合规则的目录
			},
			{
				test: /\.js$/,
				use: {
					loader: "replace-loader",
					options: {
						text: "Webpack4",
					},
				},
			},
		],
	},
	// 配置webpack的loader的查找目录
	resolveLoader: {
		modules: ["./node_modules", "./src/loader"],
	},
	plugins: [
		new WebpackSizePlugin({ fileName: "size.json" }),
		new HtmlWebpackPlugin({
			template: path.resolve(__dirname, "./index.html"), // index.html模板
			title: "欢迎来到网站主页", // 通过 htmlWebpackPlugin.options.title 配置index.html的标题
			filename: "index.html", // 输出的模板名称
		}),
	],
};
